<template>
  <div class="news-detail-page">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      :title="activityName"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      fixed
      placeholder
    />
    
    <!-- 资讯详情内容 -->
    <div class="news-detail-content">
      <div v-if="loading" class="loading-center">
        <van-loading type="spinner" size="24px">加载中...</van-loading>
      </div>
      
      <div v-else-if="newsDetail" class="news-detail">
        <!-- 标题和时间 -->
        <div class="news-header">
          <h1 class="news-title">
            <span v-if="newsDetail.is_top" class="top-tag">置顶</span>
            {{ newsDetail.title }}
          </h1>
          <div class="news-meta">
            <span class="publish-time">{{ newsDetail.publish_date_format }}</span>
          </div>
        </div>
        
        <!-- 内容 -->
        <div class="news-body">
          <div class="content" v-html="newsDetail.content"></div>
        </div>
      </div>
      
      <!-- 错误状态 -->
      <van-empty
        v-else
        description="资讯不存在或已删除"
        image="error"
      />
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { getH5NewsDetail } from '@/api/activity/index'

export default {
  name: 'NewsDetail',
  data() {
    return {
      loading: false,
      newsDetail: null,
      activityName: '',
      newsId: ''
    }
  },
  mounted() {
    this.activityName = decodeURIComponent(this.$route.query.activity_name || '')
    this.newsId = this.$route.query.id || ''
    this.getNewsDetail()
  },
  methods: {
    // 获取资讯详情
    async getNewsDetail() {
      if (!this.newsId) {
        Toast('资讯ID不能为空')
        return
      }
      
      this.loading = true
      try {
        const response = await getH5NewsDetail({
          id: this.newsId
        })
        
        if (response.result) {
          this.newsDetail = response.data
        } else {
          Toast(response.msg || '获取资讯详情失败')
          this.newsDetail = null
        }
      } catch (error) {
        console.error('获取资讯详情失败:', error)
        Toast('网络错误，请稍后重试')
        this.newsDetail = null
      } finally {
        this.loading = false
      }
    },
    
    // 返回上一页
    onClickLeft() {
      this.$router.back()
    }
  }
}
</script>

<style scoped>
.news-detail-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.news-detail-content {
  padding: 16px;
  padding-top: 0;
}

.news-detail {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.news-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.news-title {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
  margin: 0 0 12px 0;
  display: flex;
  align-items: flex-start;
}

.top-tag {
  display: inline-block;
  background: #ff4d4f;
  color: white;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 4px;
  margin-right: 10px;
  vertical-align: middle;
  flex-shrink: 0;
  margin-top: 2px;
}

.news-meta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.publish-time {
  font-size: 14px;
  color: #999;
}

.news-body {
  line-height: 1.6;
}

.content {
  font-size: 16px;
  color: #333;
  word-break: break-word;
}

/* 富文本内容样式 */
.content >>> img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 8px 0;
}

.content >>> p {
  margin: 12px 0;
  line-height: 1.6;
}

.content >>> h1,
.content >>> h2,
.content >>> h3,
.content >>> h4,
.content >>> h5,
.content >>> h6 {
  margin: 16px 0 8px 0;
  font-weight: 600;
  color: #333;
}

.content >>> h1 {
  font-size: 24px;
}

.content >>> h2 {
  font-size: 20px;
}

.content >>> h3 {
  font-size: 18px;
}

.content >>> ul,
.content >>> ol {
  margin: 12px 0;
  padding-left: 20px;
}

.content >>> li {
  margin: 4px 0;
}

.content >>> blockquote {
  margin: 16px 0;
  padding: 12px 16px;
  background: #f8f9fa;
  border-left: 4px solid #007bff;
  border-radius: 0 4px 4px 0;
}

.content >>> table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}

.content >>> table th,
.content >>> table td {
  border: 1px solid #ddd;
  padding: 8px 12px;
  text-align: left;
}

.content >>> table th {
  background-color: #f8f9fa;
  font-weight: 600;
}

.content >>> a {
  color: #007bff;
  text-decoration: none;
}

.content >>> a:hover {
  text-decoration: underline;
}

.loading-center {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 0;
}

/* 导航栏样式 */
.news-detail-page >>> .van-nav-bar {
  background: white;
}

.news-detail-page >>> .van-nav-bar__title {
  color: #333;
  font-weight: 500;
}

.news-detail-page >>> .van-nav-bar__text {
  color: #333;
}

.news-detail-page >>> .van-nav-bar .van-icon {
  color: #333;
}
</style>
